<template>
  <div class="login_page">
    <img src="@/assets/imgs/login.png" alt="">
    <h1>登 录</h1>
    <h3>欢迎登录 EHR 后台管理系统</h3>
    <a-form class="full-w" :wrapper-col="{ offset: 3, span: 18 }" :form="loginForm" @submit="handleSubmit">
      <a-form-item>
        <a-input size="large" placeholder="请输入用户名" v-decorator="['userName', { rules: [{ required: true, message: '请输入用户名' }] }]">
          <a-icon slot="addonBefore" type="user" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input size="large" placeholder="请输入密码" type="password" v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }] }]">
          <a-icon slot="addonBefore" type="lock" />
        </a-input>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 18, offset: 3 }">
        <a-button size="large" class="full-w" type="primary" html-type="submit">登录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  layout: 'log',
  name: 'Login',
  data() {
    return {
      loginForm: this.$form.createForm(this, {name: 'loginFormRef'})
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.loginForm.validateFields((err, values) => {
        if(!err) {
          this.$axios.post('/api/signin', values).then(u => {
            if(u.code === 200) {
              // 同步vuex && cookie
              // 用户信息
              this.$message.success(u.msg)
              this.$cookies.set('c_user', u.result)
              this.$store.commit('user/M_UPDATE_USER', u.result)
              this.$axios.get('/api/menu/list').then(m => {
                // 菜单信息
                this.$cookies.set('c_menu', m.result)
                this.$store.commit('menu/M_UPDATE_MENUS', m.result)
                if(!this.$route.query.path || /login/.test(this.$route.query.path)) {
                  this.$router.push('/')
                } else {
                  this.$router.push(this.$route.query.path)
                }
              })
            } else {
              this.$message.error(this.$store.state.user.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login_page{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 40px;
  & > img{
    width: 120px;
    height: auto;
    margin-bottom: 12px;
  }
  & > h3{
    margin-bottom: 48px;
    color: #888;
  }
}
</style>